<template>
  <div class="canvasContainer">
    <div id="container" class="canvasRoot" ref="rootDiv"></div>
  </div>
</template>

<script>
import G6 from "@antv/g6";
// const width = container.scrollWidth;
// const height = (container.scrollHeight || 500) - 30;
// const data = {
//   nodes: [
//     { id: "node0", size: 50, label: "0", x: 326, y: 268 },
//     { id: "node1", size: 30, label: "1", x: 280, y: 384 },
//     { id: "node2", size: 30, label: "2", x: 234, y: 167 },
//     { id: "node3", size: 30, label: "3", x: 391, y: 368 },
//     { id: "node4", size: 30, label: "4", x: 444, y: 209 },
//     { id: "node5", size: 30, label: "5", x: 378, y: 157 },
//     { id: "node6", size: 15, label: "6", x: 229, y: 400 },
//     { id: "node7", size: 15, label: "7", x: 281, y: 440 },
//     { id: "node8", size: 15, label: "8", x: 188, y: 119 },
//     { id: "node9", size: 15, label: "9", x: 287, y: 157 },
//     { id: "node10", size: 15, label: "10", x: 185, y: 200 },
//     { id: "node11", size: 15, label: "11", x: 238, y: 110 },
//     { id: "node12", size: 15, label: "12", x: 239, y: 221 },
//     { id: "node13", size: 15, label: "13", x: 176, y: 160 },
//     { id: "node14", size: 15, label: "14", x: 389, y: 423 },
//     { id: "node15", size: 15, label: "15", x: 441, y: 341 },
//     { id: "node16", size: 15, label: "16", x: 442, y: 398 },
//   ],
//   edges: [
//     { source: "node0", target: "node1", label: "0-1" },
//     { source: "node0", target: "node2", label: "0-2" },
//     { source: "node0", target: "node3", label: "0-3" },
//     { source: "node0", target: "node4", label: "0-4" },
//     { source: "node0", target: "node5", label: "0-5" },
//     { source: "node1", target: "node6", label: "1-6" },
//     { source: "node1", target: "node7", label: "1-7" },
//     { source: "node2", target: "node8", label: "2-8" },
//     { source: "node2", target: "node9", label: "2-9" },
//     { source: "node2", target: "node10", label: "2-10" },
//     { source: "node2", target: "node11", label: "2-11" },
//     { source: "node2", target: "node12", label: "2-12" },
//     { source: "node2", target: "node13", label: "2-13" },
//     { source: "node3", target: "node14", label: "3-14" },
//     { source: "node3", target: "node15", label: "3-15" },
//     { source: "node3", target: "node16", label: "3-16" },
//   ],
// };
// The symbols for the marker inside the combo
export default {
  mounted() {
    const collapseIcon = (x, y, r) => {
      return [
        ["M", x - r, y],
        ["a", r, r, 0, 1, 0, r * 2, 0],
        ["a", r, r, 0, 1, 0, -r * 2, 0],
        ["M", x - r + 4, y],
        ["L", x - r + 2 * r - 4, y],
      ];
    };
    const expandIcon = (x, y, r) => {
      return [
        ["M", x - r, y],
        ["a", r, r, 0, 1, 0, r * 2, 0],
        ["a", r, r, 0, 1, 0, -r * 2, 0],
        ["M", x - r + 4, y],
        ["L", x - r + 2 * r - 4, y],
        ["M", x - r + r, y - r + 4],
        ["L", x, y + r - 4],
      ];
    };

    G6.registerCombo(
      "cRect",
      {
        drawShape: function drawShape(cfg, group) {
          const self = this;
          console.log(cfg);
          //Get the padding from the configuration
          cfg.padding = cfg.padding || [50, 20, 20, 20];
          // Get the shape's style, where the style.width and style.height correspond to the width and height in the figure of Illustration of Built-in Rect Combo
          const style = self.getShapeStyle(cfg);
          // Add a rect shape as the keyShape which is the same as the extended rect Combo
          const rect = group.addShape("rect", {
            attrs: {
              ...style,
              x: -style.width / 2 - (cfg.padding[3] - cfg.padding[1]) / 2,
              y: -style.height / 2 - (cfg.padding[0] - cfg.padding[2]) / 2,

              width: style.width,
              height: style.height,
            },
            draggable: false,
            name: "combo-keyShape",
          });
          // Add the circle on the right
          group.addShape("marker", {
            attrs: {
              ...style,
              fill: "#fff",
              opacity: 1,
             //cfg.style.width and cfg.style.heigth correspond to the innerWidth and innerHeight in the figure of Illustration of Built-in Rect Combo
              x: cfg.style.width / 2 + cfg.padding[1],
              y: (cfg.padding[2] - cfg.padding[0]) / 2,
              r: 10,
              symbol: collapseIcon,
            },
            draggable: false,
            name: "combo-marker-shape",
          });
          return rect;
        },
        // Define the updating logic of the right circle
        afterUpdate: function afterUpdate(cfg, combo) {
          const group = combo.get("group");
          // Find the circle shape in the graphics group of the Combo by name
          const marker = group.find(
            (ele) => ele.get("name") === "combo-marker-shape"
          );
          // Update the position of the right circle
          marker.attr({
            //cfg.style.width and cfg.style.heigth correspond to the innerWidth and innerHeight in the figure of Illustration of Built-in Rect Combo
            x: cfg.style.width / 2 + cfg.padding[1],
            y: (cfg.padding[2] - cfg.padding[0]) / 2,
           // The property 'collapsed' in the combo data represents the collapsing state of the Combo
           // Update the symbol according to 'collapsed'
            symbol: cfg.collapsed ? expandIcon : collapseIcon,
          });
        },
      },
      "rect"
    );

    const data = {
      nodes: [
        { id: "node1", x: 650, y: 400, comboId: "combo1", label: "1" },
        { id: "node2", x: 300, y: 200, comboId: "combo1", label: "2" },
        // { id: "node3", x: 100, y: 200, comboId: "combo3" },
      ],
      combos: [
        {
          id: "combo1",
          label: "Combo1",
          parentId: "combo2",
          fixSize: [600, 200],
          fixCollapseSize: [20, 20],
        },
        {
          id: "combo2",
          label: "Combo 2",
          parentId: "combo3",
          fixSize: [800, 400],
        },
        { id: "combo3", label: "Combo 3", fixSize: [1000, 800] },
      ],
    };

    const container = document.getElementById("container");

    const width = container.scrollWidth + 1000;
    const height = (container.scrollHeight || 500) - 20 + 1000;
    const graph = new G6.Graph({
      container: "container",
      width,
      height,
      // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
      groupByTypes: false,
      enabledStack: true,
      // Configure the combos globally
      defaultCombo: {
        // The type of the combos. You can also assign type in the data of combos
        type: "cRect",

        // ... Other global configurations for combos
      },

      comboStateStyles: {
        dragenter: {
          lineWidth: 4,
          stroke: "#FE9797",
        },
      },
      modes: {
        default: [
          {
            type: "drag-node",
            relayout: false,
            onlyChangeComboSize: true,
            enableDelegate: true,
            // shouldBegin: (e) => {
            //   // 不允许拖拽 id 为 'node1' 的节点
            //   if (e.item && e.item.getModel().id === "combo3") return false;
            // },
          },
          {
            type: "drag-combo",
            //   enableDelegate: true,
            //   activeState: "actived",
            onlyChangeComboSize: true,
            //   shouldUpdate: (e) => {
            //     // 不允许 id 为 'combo1' 的 combo 被拖拽
            //     if (e.item && e.item.getModel().id === "combo3") return false;
            //     return true;
            //   },
            //   // shouldEnd【v4.3.8 后支持】
            //   shouldEnd: (e, newParent) => {
            //     // 不可以将 combo 释放到 combo1 上
            //     if (newParent && newParent.getModel().id === "combo1")
            //       return false;
            //     return true;
            //   },
          },
          {
            type: "collapse-expand-combo",
            relayout: false,
          },
          "drag-canvas",
          "click-select",
          {
            type: "zoom-canvas",
          },
        ],
      },
    });
    graph.data(data);
    graph.render();

    // collapse/expand when click the marker
    graph.on("combo:click", (e) => {
      if (e.target.get("name") === "combo-marker-shape") {
        // graph.collapseExpandCombo(e.item.getModel().id);
        graph.collapseExpandCombo(e.item);
        if (graph.get("layout")) graph.layout();
        else graph.refreshPositions();
      }
    });

    graph.on("combo:dragend", (e) => {
      graph.getCombos().forEach((combo) => {
        graph.setItemState(combo, "dragenter", false);
      });
    });
    graph.on("node:dragend", (e) => {
      graph.getCombos().forEach((combo) => {
        graph.setItemState(combo, "dragenter", false);
      });
    });

    graph.on("combo:dragenter", (e) => {
      graph.setItemState(e.item, "dragenter", true);
    });
    graph.on("combo:dragleave", (e) => {
      graph.setItemState(e.item, "dragenter", false);
    });

    graph.on("combo:mouseenter", (evt) => {
      const { item } = evt;
      graph.setItemState(item, "active", true);
    });

    graph.on("combo:mouseleave", (evt) => {
      const { item } = evt;
      graph.setItemState(item, "active", false);
    });

    if (typeof window !== "undefined")
      window.onresize = () => {
        if (!graph || graph.get("destroyed")) return;
        if (!container || !container.scrollWidth || !container.scrollHeight)
          return;
        graph.changeSize(container.scrollWidth, container.scrollHeight - 20);
      };
  },
};
</script>
<style>
.canvasContainer {
  display: flex;
  width: 60%;
  background-color: rgba(255, 255, 255, 0.488);
}
.canvasRoot {
  width: 100%;
  height: 100%;
}
</style>
